<div class="rxjs-guide-content">
  <h1>RxJS 指南</h1>
  <p>展示 RxJS 的各种操作符和实际应用场景，帮助开发者掌握响应式编程</p>
  
  <div class="demo-container">
    <!-- 标签页 -->
    <mat-tab-group>
      
      <!-- 基础操作符 -->
      <mat-tab label="基础操作符">
        <div class="tab-content">
          
          <!-- 计数器演示 -->
          <div class="card">
            <h3>计数器演示 (BehaviorSubject + interval)</h3>
            <div class="demo-item">
              <div class="demo-result">
                <div class="counter-display">
                  <mat-icon>timer</mat-icon>
                  <span class="counter-value">{{ counter$ | async }}</span>
                  @if (isCounting$ | async) {
                    <mat-progress-bar 
                      mode="indeterminate" 
                      class="progress-bar">
                    </mat-progress-bar>
                  }
                </div>
                <div class="counter-controls">
                  <button mat-raised-button 
                          color="primary" 
                          (click)="startCounter()"
                          [disabled]="isCounting$ | async">
                    <mat-icon>play_arrow</mat-icon>
                    开始计数
                  </button>
                  <button mat-raised-button 
                          color="warn" 
                          (click)="stopCounter()"
                          [disabled]="!(isCounting$ | async)">
                    <mat-icon>stop</mat-icon>
                    停止计数
                  </button>
                  <button mat-raised-button 
                          (click)="resetCounter()">
                    <mat-icon>refresh</mat-icon>
                    重置
                  </button>
                </div>
                <mat-form-field appearance="fill" class="form-field">
                  <mat-label>手动设置计数</mat-label>
                  <input matInput 
                         type="number" 
                         [formControl]="counterControl" 
                         placeholder="输入数字">
                </mat-form-field>
              </div>
              <div class="code-example">
                <h4>TypeScript 代码：</h4>
                <pre><code>// map 操作符
const numbers$ = of(1, 2, 3, 4, 5);
const doubled$ = numbers$.pipe(
  map(x => x * 2)
);
doubled$.subscribe(value => console.log(value));

// filter 操作符
const evenNumbers$ = numbers$.pipe(
  filter(x => x % 2 === 0)
);
evenNumbers$.subscribe(value => console.log(value));</code></pre>
              </div>
            </div>
          </div>

          <!-- 搜索演示 -->
          <div class="card">
            <h3>实时搜索演示 (debounceTime + switchMap)</h3>
            <div class="demo-item">
              <div class="demo-result">
                <mat-form-field appearance="fill" class="search-field">
                  <mat-label>搜索技术栈</mat-label>
                  <input matInput 
                         [formControl]="searchControl" 
                         placeholder="输入搜索关键词">
                  <mat-icon matSuffix>search</mat-icon>
                </mat-form-field>
                
                <div class="search-info">
                  <p><strong>搜索词:</strong> {{ searchTerm$ | async }}</p>
                  <p><strong>结果数量:</strong> {{ (searchResults$ | async)?.length || 0 }}</p>
                </div>
                
                <div class="search-results" *ngIf="(searchResults$ | async)?.length">
                  <div class="result-item" 
                       *ngFor="let result of searchResults$ | async">
                    <mat-icon>check_circle</mat-icon>
                    <span>{{ result }}</span>
                  </div>
                </div>
              </div>
              <div class="code-example">
                <h4>搜索实现：</h4>
                <pre><code>this.searchControl.valueChanges.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(term => this.getMockSearchResults(term))
).subscribe(results => this.searchResults$.next(results));</code></pre>
              </div>
            </div>
          </div>

        </div>
      </mat-tab>

      <!-- 组合操作符 -->
      <mat-tab label="组合操作符">
        <div class="tab-content">
          
          <!-- API 调用演示 -->
          <div class="card">
            <h3>API 调用演示 (forkJoin + retry + catchError)</h3>
            <div class="demo-item">
              <div class="demo-result">
                <div class="api-controls">
                  <button mat-raised-button 
                          color="primary" 
                          (click)="simulateApiCall()"
                          [disabled]="isLoading$ | async">
                    <mat-icon>cloud_download</mat-icon>
                    加载数据
                  </button>
                  <button mat-raised-button 
                          color="warn" 
                          (click)="demonstrateErrorHandling()">
                    <mat-icon>error</mat-icon>
                    演示错误处理
                  </button>
                  <button mat-raised-button 
                          (click)="demonstrateCombination()">
                    <mat-icon>merge</mat-icon>
                    演示合并流
                  </button>
                </div>
                
                <mat-progress-bar 
                  *ngIf="isLoading$ | async" 
                  mode="indeterminate" 
                  class="progress-bar">
                </mat-progress-bar>
                
                <div class="api-results" *ngIf="(apiData$ | async)?.length">
                  <h4>API 数据：</h4>
                  <div class="data-item" 
                       *ngFor="let item of apiData$ | async">
                    <mat-icon>person</mat-icon>
                    <div class="data-content">
                      <strong>{{ item.name }}</strong>
                      <span>{{ item.email }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="code-example">
                <h4>组合操作符代码：</h4>
                <pre><code>// combineLatest
const name$ = new BehaviorSubject('张三');
const age$ = new BehaviorSubject(25);
const user$ = combineLatest([name$, age$]).pipe(
  map(([name, age]) => ({{ '{' }} name, age {{ '}' }}))
);

// merge
const stream1$ = interval(1000).pipe(map(x => 'Stream1: ' + x));
const stream2$ = interval(1500).pipe(map(x => 'Stream2: ' + x));
const merged$ = merge(stream1$, stream2$);

// forkJoin
const api1$ = this.http.get('/api/users');
const api2$ = this.http.get('/api/posts');
const combined$ = forkJoin([api1$, api2$]);</code></pre>
              </div>
            </div>
          </div>

          <!-- 定时器演示 -->
          <div class="card">
            <h3>定时器演示 (timer + interval)</h3>
            <div class="demo-item">
              <div class="demo-result">
                <div class="timer-display">
                  <div class="timer-item">
                    <mat-icon>timer</mat-icon>
                    <div class="timer-content">
                      <h4>Timer (每秒递增)</h4>
                      <span class="timer-value">{{ timer$ | async }}</span>
                    </div>
                  </div>
                  <div class="timer-item">
                    <mat-icon>schedule</mat-icon>
                    <div class="timer-content">
                      <h4>Interval (每2秒递增)</h4>
                      <span class="timer-value">{{ interval$ | async }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="code-example">
                <h4>定时器代码：</h4>
                <pre><code>// Timer - 延迟后开始，然后按间隔执行
timer(0, 1000).pipe(take(10)).subscribe(value => {{ '{' }}
  this.timer$.next(value);
{{ '}' }});

// Interval - 立即开始，按间隔执行
interval(2000).pipe(take(5)).subscribe(value => {{ '{' }}
  this.interval$.next(value);
{{ '}' }});</code></pre>
              </div>
            </div>
          </div>

        </div>
      </mat-tab>

      <!-- 高级操作符 -->
      <mat-tab label="高级操作符">
        <div class="tab-content">
          
          <div class="card">
            <h3>高级操作符示例</h3>
            <div class="demo-item">
              <div class="code-example">
                <h4>防抖、重试、累积操作：</h4>
                <pre><code>// debounceTime - 防抖
this.searchControl.valueChanges.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(term => this.searchService.search(term))
).subscribe(results => this.searchResults$.next(results));

// retry - 重试
this.http.get('/api/data').pipe(
  retry(3),
  catchError(error => of([]))
).subscribe(data => console.log(data));

// scan - 累积
const clicks$ = fromEvent(document, 'click');
const clickCount$ = clicks$.pipe(
  map(() => 1),
  scan((acc, curr) => acc + curr, 0)
);</code></pre>
              </div>
            </div>
          </div>

          <div class="card">
            <h3>实际应用场景</h3>
            <div class="demo-item">
              <div class="code-example">
                <h4>真实项目中的应用：</h4>
                <pre><code>// 自动保存
this.form.valueChanges.pipe(
  debounceTime(1000),
  distinctUntilChanged(),
  switchMap(formData => this.saveService.save(formData))
).subscribe();

// 实时搜索
this.searchInput.valueChanges.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(term => 
    term ? this.searchService.search(term) : of([])
  ),
  catchError(error => {{ '{' }}
    console.error('搜索失败:', error);
    return of([]);
  {{ '}' }})
).subscribe(results => this.results = results);

// 轮询数据
interval(5000).pipe(
  switchMap(() => this.dataService.getLatestData()),
  takeUntil(this.destroy$)
).subscribe(data => this.updateData(data));</code></pre>
              </div>
            </div>
          </div>

        </div>
      </mat-tab>

      <!-- 最佳实践 -->
      <mat-tab label="最佳实践">
        <div class="tab-content">
          
          <div class="card">
            <h3>RxJS 最佳实践</h3>
            <div class="best-practices">
              <div class="practice-item">
                <mat-icon color="primary">check_circle</mat-icon>
                <div class="practice-content">
                  <h4>1. 内存泄漏防护</h4>
                  <p>始终使用 <code>takeUntil(destroy$)</code> 来避免内存泄漏</p>
                </div>
              </div>
              
              <div class="practice-item">
                <mat-icon color="primary">check_circle</mat-icon>
                <div class="practice-content">
                  <h4>2. 错误处理</h4>
                  <p>使用 <code>catchError</code> 和 <code>retry</code> 处理网络错误</p>
                </div>
              </div>
              
              <div class="practice-item">
                <mat-icon color="primary">check_circle</mat-icon>
                <div class="practice-content">
                  <h4>3. 性能优化</h4>
                  <p>使用 <code>debounceTime</code>、<code>distinctUntilChanged</code> 优化用户输入</p>
                </div>
              </div>
              
              <div class="practice-item">
                <mat-icon color="primary">check_circle</mat-icon>
                <div class="practice-content">
                  <h4>4. 流组合</h4>
                  <p>合理使用 <code>combineLatest</code>、<code>merge</code>、<code>forkJoin</code></p>
                </div>
              </div>
              
              <div class="practice-item">
                <mat-icon color="primary">check_circle</mat-icon>
                <div class="practice-content">
                  <h4>5. 类型安全</h4>
                  <p>使用 TypeScript 泛型确保类型安全：<code>Observable&lt;T&gt;</code></p>
                </div>
              </div>
            </div>
          </div>

        </div>
      </mat-tab>

    </mat-tab-group>
  </div>
</div>